<script setup>

import {Check} from "@element-plus/icons-vue";
import {ref} from "vue";
import {getState, listInfo, insertCheckin, updateCheckin} from "@/api/checkin.js";
import {useUserInfoStore} from "@/stores/userInfo.js";
import {userInfo} from "@/api/user.js";
import {ElMessage} from "element-plus";
//分页
const pageNum = ref(1)//当前页
const total = ref(20)//总条数
const pageSize = ref(7)//每页条数

//数据表展示
const roomStateListData = ref([])

//根据id搜索
const id = ref('')
const checkinState = ref('')

const userInfoStore = useUserInfoStore();
const getUserInfo = ()=>{
  userInfo ().then(res=>{
    userInfoStore.setUserInfo(res.data)
  })
}
getUserInfo()

const getUserState = () => {
  const params = {
    userid:userInfoStore.userInfo.id
  }
  getState(params).then(res => {
    checkinState.value=res.data
  })
}
getUserState()

//获取入住房间表
const getCheckinList = () => {
  const params = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
    id: id.value
  }
  listInfo(params).then(res => {
    roomStateListData.value = res.data.records
    total.value = res.data.total
  })
}
getCheckinList()

//重置搜索框
const resetParams = () => {
  id.value = ''
  getCheckinList()
}

// 当每页条数发生了变化，会调用
const handleSizeChange = (val) => {
  pageSize.value = val
  getCheckinList()
}

// 当前页面发生变化，会调用
const handleCurrentChange = (val) => {
  pageNum.value = val
  getCheckinList()
}

const checkinData=ref({
  userid:0,
  roomid:0,
  state:0
})

const addCheckin= (roomid) =>{
  checkinData.value.roomid=roomid
  checkinData.value.userid=userInfoStore.userInfo.id
  checkinData.value.state=1
  insertCheckin(checkinData.value).then(res => {
    if (res.status) {
      getCheckinList()
      getUserState()
      ElMessage.success("添加成功")
    }
  })
}

const alterCheckin = ()=>{
  const obj={
    userid:userInfoStore.userInfo.id
  }
  updateCheckin(obj).then(res => {
    if (res.status) {
      getCheckinList()
      getUserState()
      ElMessage.success("更新成功")
    }
  })
}

</script>

<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <span>预约订购</span>
        <div>
          <span v-if="checkinState.state === 0" :style="{ color: 'red' }">未入住</span>
          <span v-else-if="checkinState.state === 1" :style="{ color: 'blue' }">已预约 <strong>{{checkinState.roomid}}</strong></span>
          <span v-else-if="checkinState.state === 2" :style="{ color: 'green' }">已入住 <strong>{{checkinState.roomid}}</strong></span>
        </div>
      </div>
    </template>
    <!-- 搜索表单 -->
    <el-form inline>
      <el-form-item label="客房编号：">
        <el-input v-model="id" placeholder="请输入客房编号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getCheckinList">搜索</el-button>
        <el-button @click="resetParams">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="roomStateListData" style="width: 100%">
      <el-table-column label="编号" prop="id"></el-table-column>
      <el-table-column label="类型" prop="type"></el-table-column>
      <el-table-column label="价格" prop="price"></el-table-column>
      <el-table-column label="状态" prop="status">
        <template #default="{row}">
          <el-tag
              :type="row.status === 0? 'info' : (row.status === 1? 'primary' : 'success')"
          >
            {{ row.status === 0? '空' : (row.status === 1? '已预约' : '已入住') }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template #default="{ row }">
          <div v-if="checkinState.state===0&&row.status===0">
           <el-button :icon="Check" circle type="primary" @click="addCheckin(row.id)"></el-button>
            预约
          </div>

          <div v-else-if="checkinState.state===0&&row.status!==0">
            抱歉！请选择其他房间
          </div>

          <div v-else-if="checkinState.state===1&&row.id===checkinState.roomid">
            <el-button :icon="Check" circle type="primary" @click="alterCheckin"></el-button>
            入住
          </div>

          <div v-else-if="checkinState.state===1&&row.id!==checkinState.roomid">
            请入住您预约的房间
          </div>

          <div v-else-if="checkinState.state===2&&row.id===checkinState.roomid" :style="{ color: 'green' }">
            已入住该房间
          </div>

          <div v-else-if="checkinState.state===2&&row.id!==checkinState.roomid">
            您已入住，请先退房！
          </div>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="没有数据"/>
      </template>
    </el-table>

    <!--分页条-->
    <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[5 ,10, 15]"
                   layout="jumper, total, sizes, prev, pager, next" background :total="total"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange" style="margin-top: 20px; justify-content: flex-end"/>
  </el-card>


</template>

<style scoped lang="scss">
.page-container {
  min-height: 100%;
  box-sizing: border-box;

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

.demo-datetime-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}

.demo-datetime-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}

.demo-datetime-picker .block:last-child {
  border-right: none;
}

.demo-datetime-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
</style>